<template>
  <el-dialog
    title="地址"
    :visible.sync="dialogVisible"
    width="50%"
    class="addressDetail"
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      inline
      size="mini"
    >
      <el-form-item label="发货地址" prop="addressName">
        <el-input
          v-model="form.addressName"
          class="inner-input"
          placeholder="发货地址"
        />
      </el-form-item>
      <el-form-item label="发货人姓名" prop="name">
        <el-input
          v-model="form.name"
          class="inner-input"
          placeholder="发货人姓名"
        />
      </el-form-item>
      <el-form-item label="发货人手机号" prop="phone">
        <el-input
          v-model.number="form.phone"
          class="inner-input"
          placeholder="发货人手机号"
        />
      </el-form-item>
      <el-form-item label="邮政编码" prop="postCode">
        <el-input
          v-model.number="form.postCode"
          class="inner-input"
          placeholder="邮政编码"
        />
      </el-form-item>
      <el-form-item label="收货地址" prop="cityCode">
        <el-cascader
          v-model="form.cityCode"
          class="inner-input"
          size="mini"
          :options="regionData"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="detailAddress">
        <el-input
          v-model="form.detailAddress"
          class="inner-input"
          placeholder="详细地址"
        />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="onSubmit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { regionData, CodeToText } from 'element-china-area-data'

import {
  saveAddress,
  companyAddress,
  updateAddress
} from '@/api/order/address/index'
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      id: '',
      form: {
        addressName: '',
        name: '',
        phone: '',
        postCode: '',
        cityCode: '',
        detailAddress: ''
      },
      regionData, // 全国城市数据
      rules: {
        addressName: [
          {
            required: true,
            message: '请输入发货地址'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入发货人姓名'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入发货人手机号'
          }
        ],
        cityCode: [
          {
            required: true,
            message: '请选择收货地址'
          }
        ]
      }
    }
  },
  methods: {
    // 显示弹窗
    open(id) {
      this.dialogVisible = true
      if (id) {
        this.id = id
        this.getAddressInfo()
      }
    },
    // 提交保存
    onSubmit() {
      this.loading = true
      this.$refs.form.validate(async(valid) => {
        console.log(valid)
        console.log(this.form)
        if (valid) {
          const formObj = {
            ...this.form,
            province: CodeToText[this.form.cityCode[0]],
            city: CodeToText[this.form.cityCode[1]],
            region: CodeToText[this.form.cityCode[2]],
            cityCode: this.form.cityCode.join()
          }
          let ajaxApi = saveAddress
          if (this.id) {
            ajaxApi = updateAddress
          }
          const { success, message } = await ajaxApi(formObj)
          if (success) {
            this.$message.success(this.id ? '更新成功' : '新增成功')
            // 更新父组件数据
            this.$parent.getAddressList()
          } else {
            this.$message.error(message)
          }
        }
        this.loading = false
        this.dialogVisible = false
      })
    },
    // 获取地址信息
    async getAddressInfo() {
      const { success, data, message } = await companyAddress(this.id)
      if (success) {
        this.form = {
          ...data.address,
          cityCode: data.address.cityCode.split(',')
        }
      } else {
        this.$message.error(message)
      }
    },
    // 关闭弹窗
    handleClose() {
      this.$refs.form.resetFields()
      this.id = ''
    }
  }
}
</script>
<style lang="scss" scope>
.addressDetail {
  .inner-input {
    width: 300px;
  }
}
</style>
